<template>
    <div class="bg">
        <nav-com title="提现明细" :showView='showView' @back="backHandler()"></nav-com>
        <van-pull-refresh v-model = 'isLoading' @refresh='onRefresh'>
        <van-row class="w_part2">
            <div v-if="list.length==0" class="empty">
                <img src='../../assets/t4.png'>
                <p>您还没有提现记录哦~</p>
            </div>
            <ul v-else class="widthList">
                <li v-for="(item,index) in list" :key="index">
                    <div class="list_top">
                        <p>{{item.createdAt | formatDate}}</p>
                        <span v-if="item.state == 'pending'">待审核</span>
                        <span v-if="item.state == 'success'">审核成功</span>
                        <span v-if="item.state == 'failure'">审核失败</span>
                        <span v-if="item.state == 'finish'">提现完成</span>
                    </div>
                    <div class="list_bottom">
                        <p>{{item.bankName}}</p>
                        <p>{{item.cardNumber | formatCardNumber }}</p>
                        <span class="list_text">{{item.money}}</span>
                    </div>
                    <div v-if="item.state == 'success' || item.state == 'failure' " class="teamlist_bottom">
                        <p>{{item.memo}}</p>
                    </div>
                </li>
                
            </ul>
        </van-row>
        </van-pull-refresh>
    </div>
</template>
<script>
import navCom from '@/component/nav'
import {getwithdraws}  from '@/api/api'
export default {
    name:'withdrawalList',
    components:{
        navCom
    },
    data() {
        return{
            showView:true,
            uid: weixin.getUserId(),
            list:[],
            isLoading:false,
            pageNo:1,
        }
    },
    mounted(){
        this.init()
    },
    methods:{
        //返回
        backHandler(){
            this.$router.go(-1)
        },
        onRefresh(){
            this.list = []
            this.pageNo = 1
            this.init()
            this.isLoading = false
        },
        //初始化
        init(){
            getwithdraws({userId:this.uid,pageNo:this.pageNo}).then(res=>{
                if(res.data.code == 200){
                    this.pageNo++
                    this.list = this.list.concat(res.data.data.rows)
                    this.total = res.data.data.total
                    if(this.list.length < 1 ){
                        this.finished = true
                    }else if(this.list.length >= this.total){
                        this.finished = true
                    }else {
                        this.finished = false
                        this.loading = false
                    }
                }else {
                    this.$dialog.alert({
                        message:res.data.msg
                    })
                }
            })
        },
        
    }
}
</script>
<style scoped>
p {padding:0; margin:0;}
.bg {background: #F1F3F6; min-height: 100vh;}
.widthList { margin:0 4vw; padding-top:4vw;margin-bottom:20vw;}
.widthList li{ border-radius: 2.6vw; color:#333; background: #fff; margin-bottom:4vw;}
.list_top { display: flex; justify-content:space-between; padding:0 2.6vw; height:8vw; line-height:8vw; border-bottom:1px solid #d8d8d8; }
.list_top p {color:#999;}
.list_top span { color:#FF491F;}
.list_bottom { display: flex; justify-content: space-between; padding:0 2.6vw; height:13.33vw; line-height: 13.33vw;}
.list_text {color:#FF0000;}
.teamlist_bottom {padding:0 0 2.6vw 2.6vw;}
.empty {padding-top:29.33vw; text-align: center;}
.empty img {width:54.4vw; height:37.6vw;}
.empty p {font-size:3vw; color:#333; margin-top:4vw;}
</style>
